ಸಿಎಸ್‌ಎಸ್‌ ಮೋಷನ್ ಪಾತ್ ಕೋಆರ್ಡಿನೇಟ್ ಸಿಸ್ಟಮ್: ಡೈನಾಮಿಕ್ ಆನಿಮೇಷನ್‌ಗಳಿಗಾಗಿ ಪಾತ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವುದು

ಸಿಎಸ್‌ಎಸ್‌ ಮೋಷನ್ ಪಾತ್ ಒಂದು ಶಕ್ತಿಯುತ ಫೀಚರ್ ಆಗಿದ್ದು, ಇದು ನಿಮಗೆ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಪಥದಲ್ಲಿ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಆನಿಮೇಟ್ ಮಾಡಲು ಅನುಮತಿಸುತ್ತದೆ. ಇದು ವೆಬ್ ಆನಿಮೇಷನ್‌ಗೆ ಸೃಜನಾತ್ಮಕ ಸಾಧ್ಯತೆಗಳ ಜಗತ್ತನ್ನು ತೆರೆಯುತ್ತದೆ, ಹಿಂದೆ ಕಷ್ಟಕರವಾಗಿದ್ದ ಅಥವಾ ಅಸಾಧ್ಯವಾಗಿದ್ದ ರೀತಿಯಲ್ಲಿ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಚಲಿಸುವಂತೆ ಮಾಡಲು ನಿಮಗೆ ಅವಕಾಶ ನೀಡುತ್ತದೆ. ಈ ಮಾರ್ಗದರ್ಶಿ ಸಿಎಸ್‌ಎಸ್‌ ಮೋಷನ್ ಪಾತ್ ಕೋಆರ್ಡಿನೇಟ್ ಸಿಸ್ಟಮ್‌ನ ಜಟಿಲತೆಗಳನ್ನು ವಿವರಿಸುತ್ತದೆ, ಈ ಪಥಗಳನ್ನು ಹೇಗೆ ವ್ಯಾಖ್ಯಾನಿಸುವುದು ಮತ್ತು ಡೈನಾಮಿಕ್ ವೆಬ್ ಅನುಭವಗಳಿಗಾಗಿ ಅವುಗಳ ಸಾಮರ್ಥ್ಯವನ್ನು ಹೇಗೆ ಬಳಸಿಕೊಳ್ಳುವುದು ಎಂಬುದರ ಮೇಲೆ ಗಮನಹರಿಸುತ್ತದೆ.

ಮೂಲ ಪರಿಕಲ್ಪನೆಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

ಅದರ ಹೃದಯಭಾಗದಲ್ಲಿ, ಸಿಎಸ್‌ಎಸ್‌ ಮೋಷನ್ ಪಾತ್ ಒಂದು ಪಥದ ಪರಿಕಲ್ಪನೆಯ ಸುತ್ತ ಸುತ್ತುತ್ತದೆ. ಈ ಪಥವು ಒಂದು ಎಲಿಮೆಂಟ್ ಚಲಿಸುವ ಪಥವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಇದನ್ನು offset-path ಪ್ರಾಪರ್ಟಿಯನ್ನು ಬಳಸಿಕೊಂಡು ಸಾಧಿಸಲಾಗುತ್ತದೆ, ಇದು ಪಥವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ. ನಂತರ ಆನಿಮೇಷನ್, ಆ ಪಥದಲ್ಲಿ ಎಲಿಮೆಂಟ್‌ನ ಸ್ಥಾನ, ತಿರುಗುವಿಕೆ ಮತ್ತು ಆಂಕರ್ ಪಾಯಿಂಟ್ ಅನ್ನು ನಿಯಂತ್ರಿಸಲು offset-distance, offset-rotate, ಮತ್ತು offset-anchor ನಂತಹ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಬಳಸುತ್ತದೆ. ಎಸ್‌ವಿಜಿ ಪಥಗಳು, ಆಕಾರಗಳು, ಮತ್ತು ಮೂಲ ಜ್ಯಾಮಿತೀಯ ಪ್ರಿಮಿಟಿವ್‌ಗಳನ್ನು ಒಳಗೊಂಡಂತೆ ವಿವಿಧ ವಿಧಾನಗಳನ್ನು ಬಳಸಿ ಪಥವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಬಹುದು.

ಪಾತ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವುದು: ಚಲನೆಯ ಅಡಿಪಾಯ

ನಿಮ್ಮ ಆನಿಮೇಷನ್‌ಗಳ ನಿಖರತೆ ಮತ್ತು ಸೃಜನಶೀಲತೆಯು ನೀವು ನಿಮ್ಮ ಪಥಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವ ನಿಖರತೆಯ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿರುತ್ತದೆ. ಇದಕ್ಕಾಗಿ `offset-path` ಪ್ರಾಪರ್ಟಿ ನಿಮ್ಮ ಪ್ರಾಥಮಿಕ ಸಾಧನವಾಗಿದೆ, ಮತ್ತು ಅದರ ಮೌಲ್ಯವು ವಿವಿಧ ಪಥ ವ್ಯಾಖ್ಯಾನಗಳನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ.

1. ಎಸ್‌ವಿಜಿ ಪಾತ್‌ಗಳನ್ನು ಬಳಸುವುದು

ಎಸ್‌ವಿಜಿ (ಸ್ಕೇಲೆಬಲ್ ವೆಕ್ಟರ್ ಗ್ರಾಫಿಕ್ಸ್) ಪಥಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಅತ್ಯಂತ ಸುಲಭ ಮತ್ತು ಶಕ್ತಿಯುತ ವಿಧಾನವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಎಸ್‌ವಿಜಿ ಪಥಗಳು ರೇಖೆಗಳು, ವಕ್ರರೇಖೆಗಳು, ಮತ್ತು ಸಂಕೀರ್ಣ ಆಕಾರಗಳನ್ನು ವಿವರಿಸಲು ಮೀಸಲಾದ ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ಬಳಸುತ್ತವೆ, ಇದು ಅದ್ಭುತ ವಿವರ ಮತ್ತು ನಿಯಂತ್ರಣಕ್ಕೆ ಅವಕಾಶ ನೀಡುತ್ತದೆ. ನೀವು ನೇರವಾಗಿ ನಿಮ್ಮ HTML ನಲ್ಲಿ ಎಸ್‌ವಿಜಿ ಪಥಗಳನ್ನು ರಚಿಸಬಹುದು ಅಥವಾ ಬಾಹ್ಯ ಎಸ್‌ವಿಜಿ ಫೈಲ್ ಅನ್ನು ಉಲ್ಲೇಖಿಸಬಹುದು.

ಉದಾಹರಣೆ: ಒಂದು ಸರಳ ವಕ್ರ ಪಥ

ಎಸ್‌ವಿಜಿ `path` ಎಲಿಮೆಂಟ್ ಮತ್ತು `d` ಆಟ್ರಿಬ್ಯೂಟ್ (ಪಾತ್ ಡೇಟಾ) ಬಳಸಿ ಸರಳವಾದ ವಕ್ರ ಪಥವನ್ನು ರಚಿಸೋಣ:

            <svg width="200" height="200">
 <path id="myPath" d="M 10 10 C 40 10, 65 85, 95 95" fill="none" stroke="black"/>
</svg>
            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ:

• M 10 10: ಪ್ರಸ್ತುತ ಬಿಂದುವನ್ನು (10, 10) ಗೆ ಚಲಿಸುತ್ತದೆ.
• C 40 10, 65 85, 95 95: ಒಂದು ಕ್ಯೂಬಿಕ್ ಬೆಜಿಯರ್ ವಕ್ರರೇಖೆಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. ನಿರ್ದೇಶಾಂಕಗಳು ವಕ್ರರೇಖೆಯನ್ನು ಆಕಾರಗೊಳಿಸುವ ನಿಯಂತ್ರಣ ಬಿಂದುಗಳನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತವೆ. ನಂತರ ಎಲಿಮೆಂಟ್ ಈ ವಕ್ರರೇಖೆಯ ಉದ್ದಕ್ಕೂ ಚಲಿಸುತ್ತದೆ.

ನಿಮ್ಮ ಸಿಎಸ್‌ಎಸ್‌ನಲ್ಲಿ ಈ ಪಥವನ್ನು ಬಳಸಲು, ನೀವು ಅದರ ಐಡಿಯನ್ನು ಬಳಸಿ ಅದನ್ನು ಟಾರ್ಗೆಟ್ ಮಾಡುತ್ತೀರಿ. ಕೆಳಗಿನ ಸಿಎಸ್‌ಎಸ್‌ ನಿಯಮವನ್ನು ಪರಿಗಣಿಸಿ:

            .animated-element {
 offset-path: path('url(#myPath)');
 offset-distance: 0%; /* Start at the beginning of the path */
 animation: moveAlongPath 5s linear infinite;
}

@keyframes moveAlongPath {
  100% {
    offset-distance: 100%; /* End at the end of the path */
  }
}
            

              
                Copy
              
            
          

ಈ ಸಿಎಸ್‌ಎಸ್‌ ನಿಯಮವು ಒಂದು ಆನಿಮೇಷನ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ, ಇದರಲ್ಲಿ .animated-element #myPath ನಿಂದ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಎಸ್‌ವಿಜಿ ಪಥವನ್ನು ಅನುಸರಿಸುತ್ತದೆ.

2. ಮೂಲ ಆಕಾರಗಳು ಮತ್ತು ಜ್ಯಾಮಿತಿಯನ್ನು ಬಳಸುವುದು

ಎಸ್‌ವಿಜಿ ಪಥಗಳು ಹೆಚ್ಚು ನಮ್ಯತೆಯನ್ನು ನೀಡುತ್ತವೆಯಾದರೂ, `path()` ಫಂಕ್ಷನ್‌ನೊಂದಿಗೆ ಮೂಲ ಜ್ಯಾಮಿತೀಯ ಆಕಾರಗಳನ್ನು ಬಳಸಿಕೊಂಡು ನೀವು ಪಥಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಬಹುದು. ನೇರ ರೇಖೆಯಲ್ಲಿ ಅಥವಾ ವೃತ್ತಾಕಾರದ ಪಥದಲ್ಲಿ ಚಲಿಸುವಂತಹ ಸರಳ ಚಲನೆಗಳಿಗೆ ಇದು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ. ಸಂಕೀರ್ಣ ಪಥಗಳು ಅಗತ್ಯವಿಲ್ಲದಿದ್ದಾಗ ಈ ಮೂಲ ಆಕಾರಗಳು ವ್ಯಾಖ್ಯಾನಗಳನ್ನು ಸರಳಗೊಳಿಸುತ್ತವೆ.

`path()` ಫಂಕ್ಷನ್ `circle()`, `ellipse()`, `rect()`, `polygon()`, ಮತ್ತು `line()` ನಂತಹ ವಿವಿಧ ಆಕಾರ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ. ಒಂದು ಸರಳ ಉದಾಹರಣೆಯನ್ನು ನೋಡೋಣ:

ಉದಾಹರಣೆ: ಒಂದು ಸರಳ ವೃತ್ತ ಪಥ

            .circle-element {
 offset-path: path('circle(50px at 50% 50%)');
 animation: rotateAround 5s linear infinite;
}

@keyframes rotateAround {
  100% {
    offset-distance: 100%;
  }
}
            

              
                Copy
              
            
          

ಇಲ್ಲಿ, `offset-path` ಅನ್ನು ವೃತ್ತಕ್ಕೆ ಹೊಂದಿಸಲಾಗಿದೆ. `circle(50px at 50% 50%)` ವೃತ್ತದ ತ್ರಿಜ್ಯವನ್ನು 50px ಗೆ ಹೊಂದಿಸುತ್ತದೆ ಮತ್ತು x ಮತ್ತು y ನಿರ್ದೇಶಾಂಕಗಳಿಗೆ 50% ಅನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುವ ಮೂಲಕ ಕೇಂದ್ರವನ್ನು ಎಲಿಮೆಂಟ್‌ನ ಕೇಂದ್ರದಲ್ಲಿ ಇರಿಸುತ್ತದೆ. ಇದು ಎಲಿಮೆಂಟ್ ಅನ್ನು ವೃತ್ತಾಕಾರದ ಪಥದಲ್ಲಿ ಚಲಿಸುವಂತೆ ಮಾಡುತ್ತದೆ.

3. `ray()` ಮತ್ತು `inset()` ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಬಳಸುವುದು

`ray()` ಫಂಕ್ಷನ್ `path()` ವ್ಯಾಖ್ಯಾನದ ಒಂದು ಭಾಗವಾಗಿದೆ. ಇದು ನಿರ್ದಿಷ್ಟ ಬಿಂದುವಿನಿಂದ ಹೊರಕ್ಕೆ ಹರಡುವ ನೇರ ರೇಖೆಯನ್ನು ರಚಿಸುತ್ತದೆ. ನೀವು ಪ್ರಾರಂಭದ ಕೋನ, ಕೋನದ ಹೆಚ್ಚಳ (ಪಥದ ಉದ್ದಕ್ಕೂ ದಿಕ್ಕು ಎಷ್ಟು ಬದಲಾಗುತ್ತದೆ), ಮತ್ತು ದೂರವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತೀರಿ. ಇದು ಬಹುಮುಖವಾಗಿದ್ದರೂ, `ray()` ಫಂಕ್ಷನ್ ಸ್ವಲ್ಪ ಸಂಕೀರ್ಣವಾಗಿರಬಹುದು, ಇದು ನಿರ್ದಿಷ್ಟ ಅಗತ್ಯಗಳಿಗೆ ಸೂಕ್ತವಾಗಿದೆ.

`inset()` ಫಂಕ್ಷನ್ `path()` ಮೌಲ್ಯದೊಂದಿಗೆ ಬಳಸಲು ಮತ್ತೊಂದು ವಿಶೇಷ ಆಕಾರ ಫಂಕ್ಷನ್ ಆಗಿದೆ. ಇದು ಒಂದು ಒಳಸೇರಿಸಿದ ಆಯತವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. ಬಳಸಿದ ಮೌಲ್ಯಗಳು ಉದ್ದದ ಮೌಲ್ಯಗಳು ಅಥವಾ ಶೇಕಡಾವಾರುಗಳಾಗಿರಬಹುದು, ಆಂತರಿಕ ಆಯತಾಕಾರದ ಪಥವನ್ನು ರಚಿಸಲು ಎಲಿಮೆಂಟ್‌ನ ಅಂಚುಗಳಿಂದ ದೂರವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತವೆ. ಫ್ರೇಮ್ ಅಥವಾ ಬಾರ್ಡರ್ ಅಗತ್ಯವಿರುವ ಪಥಗಳಿಗೆ ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ, ಇದು ಒಳಗಿನ ಅಥವಾ ಹೊರಗಿನ ಅಂಚುಗಳ ಸುತ್ತಲೂ ಚಲಿಸುವಾಗ ದೃಶ್ಯ ಪರಿಣಾಮವನ್ನು ನೀಡುತ್ತದೆ.

ಕೋಆರ್ಡಿನೇಟ್ ಸಿಸ್ಟಮ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

ನಿಮ್ಮ ಪಥಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಬಳಸಲಾಗುವ ಕೋಆರ್ಡಿನೇಟ್ ಸಿಸ್ಟಮ್ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ನಿಖರವಾಗಿ ಇರಿಸಲು ಮತ್ತು ಆನಿಮೇಟ್ ಮಾಡಲು ನಿರ್ಣಾಯಕವಾಗಿದೆ. ಇಲ್ಲಿ ಎರಡು ಮುಖ್ಯ ಕೋಆರ್ಡಿನೇಟ್ ಸಿಸ್ಟಮ್‌ಗಳಿವೆ: ಎಸ್‌ವಿಜಿ ಕೋಆರ್ಡಿನೇಟ್ ಸಿಸ್ಟಮ್ ಮತ್ತು ಎಲಿಮೆಂಟ್‌ನ ಕೋಆರ್ಡಿನೇಟ್ ಸಿಸ್ಟಮ್. ಈ ಸಿಸ್ಟಮ್‌ಗಳು ಹೇಗೆ ಸಂವಹನ ನಡೆಸುತ್ತವೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಮುಖ್ಯ.

1. ಎಸ್‌ವಿಜಿ ಕೋಆರ್ಡಿನೇಟ್ ಸಿಸ್ಟಮ್

ಎಸ್‌ವಿಜಿ ಬಳಸಿ ಪಥಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವಾಗ, ನೀವು ಎಸ್‌ವಿಜಿ ಕೋಆರ್ಡಿನೇಟ್ ಸಿಸ್ಟಮ್‌ನೊಳಗೆ ಕೆಲಸ ಮಾಡುತ್ತಿದ್ದೀರಿ. ಈ ಸಿಸ್ಟಮ್ ಅನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಎಸ್‌ವಿಜಿ ಎಲಿಮೆಂಟ್‌ನ `width` ಮತ್ತು `height` ಆಟ್ರಿಬ್ಯೂಟ್‌ಗಳಿಂದ ವ್ಯಾಖ್ಯಾನಿಸಲಾಗುತ್ತದೆ. ಮೂಲ (0, 0) ಮೇಲಿನ-ಎಡ ಮೂಲೆಯಲ್ಲಿದೆ. x-ಅಕ್ಷವು ಬಲಕ್ಕೆ ಹೆಚ್ಚಾಗುತ್ತದೆ, ಮತ್ತು y-ಅಕ್ಷವು ಕೆಳಕ್ಕೆ ಹೆಚ್ಚಾಗುತ್ತದೆ.

ಪರಿಗಣನೆಗಳು:

• ಸ್ಕೇಲಿಂಗ್ ಮತ್ತು ರೂಪಾಂತರಗಳು: ಎಸ್‌ವಿಜಿ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು `viewBox` ಮತ್ತು `transform` ನಂತಹ ಆಟ್ರಿಬ್ಯೂಟ್‌ಗಳನ್ನು ಬಳಸಿ ಸ್ಕೇಲ್ ಮತ್ತು ರೂಪಾಂತರಿಸಬಹುದು. ಈ ರೂಪಾಂತರಗಳ ಬಗ್ಗೆ ಗಮನವಿರಲಿ, ಏಕೆಂದರೆ ಅವು ನಿಮ್ಮ ಪಥಗಳನ್ನು ಹೇಗೆ ಅರ್ಥೈಸಿಕೊಳ್ಳುತ್ತವೆ ಎಂಬುದರ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುತ್ತವೆ.
• ಘಟಕಗಳು: ಎಸ್‌ವಿಜಿ ನಿರ್ದೇಶಾಂಕಗಳಿಗಾಗಿ ವಿವಿಧ ಘಟಕಗಳನ್ನು ಬಳಸುತ್ತದೆ. ಅತ್ಯಂತ ಸಾಮಾನ್ಯವಾದದ್ದು ಪಿಕ್ಸೆಲ್‌ಗಳು (px), ಆದರೆ ನೀವು ಶೇಕಡಾವಾರು (%) ಅಥವಾ ಇತರ ಘಟಕಗಳನ್ನು ಸಹ ಬಳಸಬಹುದು.

2. ಎಲಿಮೆಂಟ್ ಕೋಆರ್ಡಿನೇಟ್ ಸಿಸ್ಟಮ್

ನೀವು ಆನಿಮೇಟ್ ಮಾಡುತ್ತಿರುವ ಎಲಿಮೆಂಟ್‌ಗೂ ತನ್ನದೇ ಆದ ಕೋಆರ್ಡಿನೇಟ್ ಸಿಸ್ಟಮ್ ಇರುತ್ತದೆ. ಈ ಸಿಸ್ಟಮ್ ಅನ್ನು ಅದರ ಪೋಷಕ ಎಲಿಮೆಂಟ್‌ಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ಅದರ ಸ್ಥಾನದಿಂದ ವ್ಯಾಖ್ಯಾನಿಸಲಾಗುತ್ತದೆ. ಮೂಲ (0, 0) ಸಾಮಾನ್ಯವಾಗಿ ಎಲಿಮೆಂಟ್‌ನ ಮೇಲಿನ-ಎಡ ಮೂಲೆಯಲ್ಲಿರುತ್ತದೆ, ಅಥವಾ `transform-origin` ಹೊಂದಿಸಿದ್ದರೆ ಅದಕ್ಕೆ ಸಂಬಂಧಿಸಿರುತ್ತದೆ.

ಪ್ರಮುಖ ಟಿಪ್ಪಣಿ: `offset-path` ಪ್ರಾಪರ್ಟಿಯು *ಪೋಷಕ* ಎಲಿಮೆಂಟ್‌ನಿಂದ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಕೋಆರ್ಡಿನೇಟ್ ಸಿಸ್ಟಮ್ ಅನ್ನು ಬಳಸುತ್ತದೆ, ಒಂದು ವೇಳೆ ಎಸ್‌ವಿಜಿ ಪಥವನ್ನು `url()` ಮೂಲಕ ಉಲ್ಲೇಖಿಸಿದ್ದರೆ ಮತ್ತು ಎಲಿಮೆಂಟ್‌ನ ಹೊರಗೆ ಇರಿಸಿದ್ದರೆ. ಪಥವನ್ನು ಇನ್‌ಲೈನ್‌ನಲ್ಲಿ (ಅದೇ ಎಲಿಮೆಂಟ್ ಅಥವಾ ಎಲಿಮೆಂಟ್‌ನ ಚೈಲ್ಡ್ ಒಳಗೆ) ವ್ಯಾಖ್ಯಾನಿಸಿದ್ದರೆ, ಅದು ಎಲಿಮೆಂಟ್‌ನ ಪ್ರಸ್ತುತ ಸಂದರ್ಭ ಮತ್ತು ಕೋಆರ್ಡಿನೇಟ್ ಸಿಸ್ಟಮ್‌ನೊಳಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.

ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು ಮತ್ತು ಅನ್ವಯಗಳು

ನಿಮ್ಮ ತಿಳುವಳಿಕೆಯನ್ನು ಗಟ್ಟಿಗೊಳಿಸಲು ಕೆಲವು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳನ್ನು ಅನ್ವೇಷಿಸೋಣ.

1. ಲೋಗೋವನ್ನು ವಕ್ರ ಪಥದಲ್ಲಿ ಆನಿಮೇಟ್ ಮಾಡುವುದು

ಸನ್ನಿವೇಶ: ನೀವು ವೆಬ್‌ಸೈಟ್‌ನ ಹೆಡರ್‌ನಲ್ಲಿ ವಕ್ರ ಪಥವನ್ನು ಅನುಸರಿಸುವ ಕಂಪನಿಯ ಲೋಗೋವನ್ನು ಆನಿಮೇಟ್ ಮಾಡಲು ಬಯಸುತ್ತೀರಿ.

ಅನುಷ್ಠಾನ:

1. ಎಸ್‌ವಿಜಿ ಪಥವನ್ನು ರಚಿಸಿ: ಎಸ್‌ವಿಜಿ ಎಡಿಟಿಂಗ್ ಟೂಲ್ ಬಳಸಿ ನಯವಾದ, ವಕ್ರ ಪಥವನ್ನು ಎಳೆಯಿರಿ ಅಥವಾ ಪಥ ಡೇಟಾವನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಬರೆಯಿರಿ. ಇದು "S" ಆಕಾರ ಅಥವಾ ಯಾವುದೇ ಸೃಜನಾತ್ಮಕ ಪಥವಾಗಿರಬಹುದು.
2. ಎಸ್‌ವಿಜಿ ಸೇರಿಸಿ: ಎಸ್‌ವಿಜಿ ಕೋಡ್ ಅನ್ನು ನಿಮ್ಮ HTML ಗೆ ಸೇರಿಸಿ, ನೇರವಾಗಿ ಅಥವಾ ಬಾಹ್ಯ ಎಸ್‌ವಿಜಿ ಫೈಲ್ ಅನ್ನು ಉಲ್ಲೇಖಿಸುವ ಮೂಲಕ.
3. ಸಿಎಸ್‌ಎಸ್‌ ಅನ್ವಯಿಸಿ: ನಿಮ್ಮ ಎಸ್‌ವಿಜಿ ಪಥವನ್ನು ಉಲ್ಲೇಖಿಸಲು ಮತ್ತು ಲೋಗೋವನ್ನು ಆನಿಮೇಟ್ ಮಾಡಲು `offset-path` ಪ್ರಾಪರ್ಟಿಯನ್ನು ಬಳಸಿ.

            <div class="logo-container">
 <img src="logo.svg" alt="Company Logo" class="animated-logo">
</div>

<svg style="position: absolute; left: 0; top: 0; width: 0; height: 0;">
 <path id="logoPath" d="M 10 10 C 50 10, 50 90, 90 90" stroke="none" fill="none" />
</svg>

.logo-container {
  position: relative;
  width: 100px;
  height: 100px;
}

.animated-logo {
  position: absolute;
  offset-path: path('url(#logoPath)');
  offset-distance: 0%;
  animation: logoAnimation 5s linear infinite;
  width: 50px;
  height: 50px;
  top:0; /* Make top align with logo path origin */
  left: 0; /* Make left align with logo path origin */
}

@keyframes logoAnimation {
  100% {
    offset-distance: 100%;
  }
}
            

              
                Copy
              
            
          

2. ವೃತ್ತಾಕಾರದ ಲೋಡಿಂಗ್ ಆನಿಮೇಷನ್ ರಚಿಸುವುದು

ಸನ್ನಿವೇಶ: ನೀವು ವೃತ್ತಾಕಾರದ ಲೋಡಿಂಗ್ ಆನಿಮೇಷನ್ ರಚಿಸಲು ಬಯಸುತ್ತೀರಿ.

ಅನುಷ್ಠಾನ:

1. `path()` ಫಂಕ್ಷನ್ ಬಳಸಿ: ವೃತ್ತಾಕಾರದ ಪಥವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು `circle()` ಜೊತೆಗೆ `path()` ಫಂಕ್ಷನ್ ಬಳಸಿ.
2. `offset-distance` ಅನ್ನು ಆನಿಮೇಟ್ ಮಾಡಿ: ಲೋಡಿಂಗ್ ಇಂಡಿಕೇಟರ್ ವೃತ್ತದ ಸುತ್ತ ಚಲಿಸುವಂತೆ ಮಾಡಲು `offset-distance` ಪ್ರಾಪರ್ಟಿಯನ್ನು 0% ರಿಂದ 100% ಗೆ ಆನಿಮೇಟ್ ಮಾಡಿ.
3. `offset-rotate` ಅನ್ನು ಪರಿಗಣಿಸಿ: ಹೆಚ್ಚು ಸುಧಾರಿತ ಪರಿಣಾಮಗಳಿಗಾಗಿ ನೀವು `offset-distance` ಅನ್ನು `offset-rotate` ಜೊತೆ ಸಂಯೋಜಿಸಬಹುದು.

            <div class="loading-container">
 <div class="loading-indicator"></div>
</div>

.loading-container {
  position: relative;
  width: 100px;
  height: 100px;
}

.loading-indicator {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #3498db;
  border-radius: 50%;
  offset-path: path('circle(40px at 50% 50%)');
  offset-distance: 0%;
  animation: rotateAround 2s linear infinite;
}

@keyframes rotateAround {
  100% {
    offset-distance: 100%;
  }
}
            

              
                Copy
              
            
          

3. ಕಸ್ಟಮ್ ಪಥದಲ್ಲಿ ಪಠ್ಯವನ್ನು ಆನಿಮೇಟ್ ಮಾಡುವುದು

ಸನ್ನಿವೇಶ: ನೀವು ಪಠ್ಯವು ನಿರ್ದಿಷ್ಟ ಆಕಾರ ಅಥವಾ ಪಥವನ್ನು ಅನುಸರಿಸುವಂತೆ ಮಾಡಲು ಬಯಸುತ್ತೀರಿ.

ಅನುಷ್ಠಾನ:**

1. ಎಸ್‌ವಿಜಿ ಪಥವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿ: ಪಠ್ಯದ ಅಪೇಕ್ಷಿತ ಪಥಕ್ಕೆ ಹೊಂದಿಕೆಯಾಗುವಂತೆ ಎಸ್‌ವಿಜಿ ಪಥವನ್ನು ರಚಿಸಿ. ಇದು ಸಹಿ, ಆಕಾರ, ಅಥವಾ ಯಾವುದೇ ಕಸ್ಟಮ್ ವಿನ್ಯಾಸವಾಗಿರಬಹುದು.
2. ಪಠ್ಯವನ್ನು ಸ್ಪ್ಯಾನ್‌ಗಳಲ್ಲಿ ಸುತ್ತಿ: ಪ್ರತಿ ಅಕ್ಷರ ಅಥವಾ ಪದವನ್ನು `span` ಎಲಿಮೆಂಟ್‌ನಲ್ಲಿ ಸುತ್ತಿ.
3. ಸಿಎಸ್‌ಎಸ್‌ ಅನ್ವಯಿಸಿ: ಪ್ರತಿ ಸ್ಪ್ಯಾನ್‌ನಲ್ಲಿ `offset-path` ಮತ್ತು `offset-distance` ಬಳಸಿ ಮತ್ತು `offset-distance` ಅನ್ನು ಕೀಫ್ರೇಮ್ ಮಾಡಿ. ಗಮನಿಸಿ: ಈ ವಿಧಾನವು ಸಾರ್ವತ್ರಿಕವಾಗಿ ಬೆಂಬಲಿತವಾಗಿಲ್ಲದಿರಬಹುದು; ನಿಮ್ಮ ಗುರಿ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಪರೀಕ್ಷಿಸಿ.

            <div class="text-container">
 <span class="letter">H</span>
 <span class="letter">e</span>
 <span class="letter">l</span>
 <span class="letter">l</span>
 <span class="letter">o</span>
</div>

<svg width="200" height="100" style="position: absolute; left: 0; top: 0;">
  <path id="textPath" d="M 10 80 C 50 10, 150 10, 190 80" stroke="none" fill="none" />
</svg>

.text-container {
  position: relative;
  width: 200px;
  height: 100px;
  font-size: 2em;
  font-family: sans-serif;
  display: flex; /* To layout text elements side by side */
}

.letter {
  position: absolute;
  offset-path: path('url(#textPath)');
  offset-distance: 0%;
  animation: textAnimation 5s linear infinite;
}

.letter:nth-child(1) { animation-delay: 0s; }
.letter:nth-child(2) { animation-delay: 1s; }
.letter:nth-child(3) { animation-delay: 2s; }
.letter:nth-child(4) { animation-delay: 3s; }
.letter:nth-child(5) { animation-delay: 4s; }

@keyframes textAnimation {
  100% {
    offset-distance: 100%;
  }
}
            

              
                Copy
              
            
          

            .animated-element {
  offset-rotate: auto;
  /* Other styles */
}
            

              
                Copy
              
            
          

            .animated-element {
  offset-anchor: 0% 0%; /* Top-left corner */
  /* Other styles */
}
            

              
                Copy
              
            
          

            @media (prefers-reduced-motion: reduce) {
  .animated-element {
    animation: none; /* Disable animations */
    /* Or use a simpler animation */
  }
}
            

              
                Copy